<template>
  <div class="mine">
    <van-skeleton title avatar :row="3" />
    <div class="info">
      <dl v-if="usershow">
        <dt>
            <img src="" alt="">
        </dt>
        <dd>
          <ul>
            <li></li>
            <li @click="gologin">点击登录&gt;</li>
          </ul>
        </dd>
      </dl>
      <dl v-if="!usershow">
        <dt>
            <img src="https://img.yzcdn.cn/vant/cat.jpeg" alt="">
        </dt>
        <dd>
          <ul>
            <li></li>
            <li @click="logout">退出登录&gt;</li>
          </ul>
        </dd>
      </dl>
    </div>
    <div class="content" v-if="!usershow">
      <h4>我的账户</h4>
      <ul>
        <li>99999.2</li>
        <li>充值金额</li>
      </ul>
      <ul>
        <li>15</li>
        <li>可用积分</li>
      </ul>
      <ul>
        <li>正常</li>
        <li>状态</li>
      </ul>
    </div>
    <div class="content" v-if="!usershow"></div>
    <div class="content" v-if="!usershow"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username:'',
      usershow:true
    }
  },
  name: "mine",
  created() {
    if(window.sessionStorage.getItem('user')){
      this.username=window.sessionStorage.getItem('uesr')
      this.usershow=!this.usershow
    }
  },
  methods: {
    gologin(){
      this.$router.push('/login')
    },
    logout(){
      window.sessionStorage.clear('user')
      this.usershow=!this.usershow
    }
  },
};
</script>

<style scoped>
.info{
  width: 100%;
  height: 100px;
  margin: 10px 0;
  border-radius: 10px;
}
.content {
  padding: 10px;
  width: 100%;
  height: auto;
  margin: 10px 0;
  background: white;
  border-radius: 10px;
}
.info dl dt,dd{
  float: left;
  text-align: center;
  width: 100px;
}
.info dl dt{
  height: 100px;
  border-radius: 5px;
  background: white;
}
.info dl dt img{
  width: 100px;
  height: 100px;
}
.info dl dd{
  line-height: 50px;
}
.content ul{
  width: 33%;
  height: 100px;
  float: left;
}
</style>
